
<template>
  <h3>部门管理</h3>
  <el-button type="primary" @click="showDialog">新增部门</el-button>
  <br>


  <!-- 弹框 -->
  <el-dialog
      v-model="dialogShow"
      :title="Tips"
      width="500"
      :before-close="handleClose"
  >
    <!--  弹框内嵌检验表单  -->
    <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
    >
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogShow = false">关闭</el-button>
        <el-button type="primary" @click="save">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>

  <br>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="name" label="部门名字" width="180" />
    <el-table-column prop="updateTime" label="最后修改时间" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" size="small" @click="queryById(scope.row)">编辑</el-button>
        <el-button type="danger" size="small" @click="deleteById(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import {onMounted, ref} from 'vue'
import {queryAll,addApi,queryByIdApi,updateApi,deleteApi} from '@/api/dept'
import { ElMessage } from 'element-plus'

const tableData=ref([])
const queryList=async ()=>{
  let result =await queryAll()
  tableData.value=result.data
}

onMounted(()=>queryList())

// 弹框初始化
const Tips=ref('新增部门')
const dialogShow = ref(false)

const showDialog=()=>{
  dialogShow.value=true
  Tips.value='新增部门'
  ruleFormRef.value.resetFields()
}

// 操作数据对象
const ruleForm=ref({name:''})

// 校验规则
const rules = ref({
  name: [
    { required: true, message: '部门名称不能为空', trigger: 'blur' },
    { min: 2, max: 7, message: '部门名称长度2-7', trigger: 'blur' },
  ]})

const ruleFormRef = ref(null)
const save=async()=>{

  if (!ruleFormRef) return

  await ruleFormRef.value.validate(async(valid) => {
    if (valid) {
      let res = null
      // 检验表单id存在为编辑 不存在为添加
      if(ruleForm.value.id){
        //编辑部门
        res = await updateApi(ruleForm.value)
      }else{
        //添加部门
        res = await addApi(ruleForm.value)
      }

      if(res.code){
        queryList()
        ElMessage({
          message: '操作成功！',
          type: 'success',
          plain: true,
        })
        dialogShow.value=false
      }else{
        ElMessage({
          message: '操作失败！',
          type: 'error',
          plain: true,
        })
      }
    } else {
      ElMessage({
        message: '校验数据失败,请重新输入！',
        type: 'error',
        plain: true,
      })
    }
  })
  ruleFormRef.value.resetFields()
}

const queryById=async(row)=>{
  let result = await queryByIdApi(row.id)
  ruleForm.value=result.data
  dialogShow.value=true
  tips.value='修改部门'
}

const deleteById = async(row)=>{
  let result = await deleteApi(row.id)
  if(result.code){
    queryList()
    ElMessage({
      message: '操作成功！',
      type: 'success',
      plain: true,
    })
  }else{
    ElMessage({
      message: '操作失败！',
      type: 'error',
      plain: true,
    })
  }
}

</script>
<style scoped></style>